<script setup lang="ts">
import { computed, ref, toRefs } from "vue";
import { useUserStore } from "@/store/modules/user";
import ChatMsg from "./ChatMsg.vue";
// import { aiLineOption } from "@/common/option";
// import { filterOption } from "@/utils/filters";
const userStore = useUserStore();
const { userId } = userStore.getUser ?? {};
const systemInfo = uni.getSystemInfoSync();
const chatDetailBoxMaxWidth = systemInfo.screenWidth - 110;
interface Props {
  item: ChatFace;
}
const avatarUrl = userStore.getUser?.avatar;
const props = defineProps<Props>();
const emits = defineEmits(["scrollBottom", "handleLongpress"]);
const { item } = toRefs(props);

const longpress = (item: ChatFace, e: any) => {
  if (item.userId === userId) return;
  emits("handleLongpress", {
    item,
    e,
  });
};

const styles = computed(() => {
  return {
    "max-width": chatDetailBoxMaxWidth + "px",
  };
});
</script>

<template>
  <div ref="chatDetail" class="flex-column-start chatDetails">
    <section v-if="item.ismy">
      <div class="chat-items my-item">
        <Xavatar class="chat-img useravatar" :src="avatarUrl" />
        <div class="chat-items-body">
          <div :style="styles" class="text my">
            <ChatMsg :item="item" />
          </div>
        </div>
      </div>
    </section>
    <section v-else>
      <div class="chat-items he-item">
        <Xavatar class="chat-img useravatar" :src="avatarUrl" />
        <div class="chat-items-body">
          <div :style="styles" class="text">
            <ChatMsg :item="item" />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.chatDetails {
  position: relative;
}

@keyframes identifier {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.last-msg {
  animation: identifier 1s both infinite;
}
.chat-items {
  display: flex;
  margin-bottom: 20rpx;
  $border: 30rpx;
  position: relative;
  &.my-item {
    padding-right: 20rpx;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    .text {
      background-color: $blue;
      margin-right: 20rpx;
      color: #fff;
      border-radius: $border 0 $border $border;
    }
  }
  &.he-item {
    flex-direction: row;
    padding-left: 20rpx;
    .text {
      background-color: #fff;
      text-align: left;
      margin-left: 20rpx;
      color: #333;
      border-radius: 0 $border $border $border;
    }
  }
  .text {
    padding: 20rpx;
    font-size: 29rpx;
    line-height: 45rpx;
    min-height: 45rpx;
    overflow-wrap: break-word;
    word-break: break-all;
    border-radius: 7rpx;
    background-color: #fff;
    margin-top: 20rpx;
    box-sizing: border-box;
  }
}
@keyframes identifier {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes identifier {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.awatar {
  .text-box {
    color: #999;
    animation: identifier 1s 0s both infinite;
  }
  ::v-deep {
    .text-box {
      color: #999;
      animation: identifier 1s 0s both infinite;
    }
  }
}
.lineType {
  &-item {
    font-size: 10px;
    padding: 0px 10px;
    color: #666;
  }
}
</style>
